<ion-view class="near-com-wrapper near-maintain">
    <ion-header-bar align-title="center" class="com-header bg-f7 border-1px-ccc">
        <div class="buttons">
            <button ng-click="back()" class="button fs-0"><i class="icon ion-ios-arrow-back color-333 fs-18"></i>
            </button>
        </div>
        <h1 class="title color-333">附近停车场</h1>
        <div class="buttons">
            <button ui-sref="search.index" class="com-h-search fs-0"><i
                    class="icon ion-ios-search-strong color-base fs-16"></i></button>
        </div>
    </ion-header-bar>
    <div ng-show="showList && !showMap" class="weui-flex bg-white border-1px-f5 com-filter">
        <div ng-click="showAreaModal()" class="weui-flex__item filter-item">
            <span>重庆市</span>
            <i class="icon fs-18" ng-class="{true:'ion-ios-arrow-up', false:'ion-ios-arrow-down'}[areaModal]"></i>
        </div>
        <div class="line"></div>
        <div ng-click="showTypeModal()" class="weui-flex__item filter-item">
            <span>距离优先</span>
            <i class="icon fs-18" ng-class="{true:'ion-ios-arrow-up', false:'ion-ios-arrow-down'}[typeModal]"></i>
        </div>
    </div>
    <!--地图-->
    <div ng-show="showMap" class="map bg-ioy-green">这里是地图</div>
    <ion-content class="near-cont" ng-show="showList" on-drag-down="dragDown()" on-drag-up="dragUp()" on-scroll="isScroll()" delegate-handle="mainScroll" scrollbar-y="false" has-bouncing="false" ng-style="contTop">
        <ion-refresher class="fs-12 color-666"
                ng-if="showList"
                pulling-text="下拉切换地图模式"
                       pulling-icon="icon ion-ios-loop"
                on-refresh="toMap()">
        </ion-refresher>
        <div class="fs-12 color-666 bg-f5 text-center tip">已为您推荐附近500m停车场</div>
        <div class="bg-white near-list">
            <div ng-repeat="item in nearbyList" class="list-item bg-white border-1px-f5">
                <h2 class="fs-14 color-333 lh-22">中国石化光电园加油站</h2>
                <p class="fs-12 color-999 lh-12">重庆市渝北区这里那里这里那里</p>
                <div class="mar-t-10 text-center btn">
                    <a ng-click="toThere()" class="inline-block text-center bg-base fs-14 color-white btn-base">去这里</a>
                </div>
                <div class="lh-22 distance">
                    <i class="icon ion-ios-location color-ccc"></i>
                    <span class="fs-16 color-base">500米</span>
                </div>
            </div>
            <!--无限加载-->
            <div ng-show="true" class="weui-loadmore weui-loadmore_line">
                <span class="weui-loadmore__tips bg-white">已经到底了</span>
            </div>
            <!--无限加载使用这个样方式进行 开关  ng-if="hasMore" -->
            <!--如果不需要则删除即可-->
            <ion-infinite-scroll
                    ng-if="hasMore"
                    on-infinite="onLoadMore()"
                    spinner="ios"
                    distance="1%">
            </ion-infinite-scroll>
        </div>
    </ion-content>
    <ion-footer-bar ng-show="showMap && !showList" align-title="center" class="my-footer row-no-padding">
        <div ng-click="toList()" class="block fs-12 bg-f5 color-999 text-center to-list">点击查看列表</div>
    </ion-footer-bar>
    <!--地区选择-->
    <div ng-show="areaModal" ng-click="closeModal()" class="my-filter-modal">
        <ion-content class="filter-cont" overflow-scroll="false" scrollbar-y="false" has-bouncing="false">
            <ul class="pad-side-15 bg-white area-list">
                <li ng-repeat="item in areList track by $index" class="my-item border-1px-f5">{{item.name}}</li>
            </ul>
        </ion-content>
    </div>
    <!--类型选择-->
    <div ng-if="typeModal" ng-click="closeModal()" class="my-filter-modal">
        <ion-content class="filter-cont" overflow-scroll="false" scrollbar-y="false" has-bouncing="false">
            <ul class="pad-side-15 bg-white area-list">
                <li ng-repeat="item in typeList track by $index" class="my-item border-1px-f5">{{item.name}}</li>
            </ul>
        </ion-content>
    </div>
</ion-view>